import * as React from 'react';
import classNames from 'classnames';

export interface StepProps {
	children?: React.ReactNode;
	className?: string;
	title?: string;
	description?: string;
}

export interface StepsProps {
	children?: React.ReactNode;
	className?: string;
	current?: number;
}

interface StepsType extends React.FC<StepsProps> {
	Step: typeof Step;
}

const Step: React.FC<StepProps> = props => {
	const prefixCls = 'bh-steps-item';
	const {
		children,
		className,
		title,
		description,
		...restProps
	} = props;
	const classString = classNames(
		prefixCls,
		className,
		{
			[`${prefixCls}-finish`]: true,
			[`${prefixCls}-process`]: true,
		}
	);

	return (
		<div {...restProps} className={classString}>
		    <div className="bh-steps-item-container">
		    	<div className="bh-steps-item-tail"></div>
		    	<div className="bh-steps-item-icon">
		    		<span className="bh-steps-icon">2</span>
		    	</div>
		    	<div className="bh-steps-item-content">
		    		<div className="bh-steps-item-title">
		    		     {title}
		    			<div className="bh-steps-item-subtitle"></div>
		    		</div>
		    		<div className="bh-steps-item-description">{description}</div>
		    	</div>
		    </div>
		</div>
	)
};

const Steps: StepsType = props => {
	const prefixCls = 'bh-steps';
	const {
		children,
		className,
		...restProps
	} = props;
	const classString = classNames(
		prefixCls,
		className,
		{
			[`${prefixCls}-horizontal`]: true,
			[`${prefixCls}-label-horizontal`]: true,
		}
	);

	return (
		<div {...restProps} className={classString}>
		    {children}
		</div>
	)
};

Steps.Step = Step;

export default Steps;